<!--这是社群成员列表-->
<template>
	<div style="margin: 20px 20px 0 20px;"  v-loading="formLoading">
		<div style="margin-top:20px ;padding-right: 20px;text-align: right;">
			<el-form class="form-container">
				<el-select  style="width: 120px;" v-model="listQuery.role" placeholder="请选择身份">
				    <el-option
				      v-for="item in options"
				      :key="item.id"
				      :label="item.value"
				      :value="item.id">
				    </el-option>
				</el-select>
        <el-input v-model="listQuery.userName" clearable placeholder="请输入群成员名称" @keyup.enter.native="searchMember" style="width: 150px;"></el-input>
        <el-input v-model="listQuery.mobile" clearable placeholder="请输入手机号" @keyup.enter.native="searchMember" style="width: 150px;"></el-input>
        <el-input v-model="listQuery.userId" clearable placeholder="请输入成员ID" @keyup.enter.native="searchMember" style="width: 150px;"></el-input>
				<el-button @click="searchMember" type="primary" icon="el-icon-search">搜索</el-button>
	    </el-form>
		</div>
		<div>
			<el-table :data="manageData" v-loading="tableLoading" element-loading-text="加载中..."
                :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
                row-key="id" fit highlight-current-row style="width: 100%;margin-top: 20px;font-size: 12px;">
        <el-table-column align="center" label="ID号">
          <template slot-scope="scope">
            <div>{{scope.row.userId}}</div>
          </template>
        </el-table-column>
		       <el-table-column label="头像/昵称">
			        <template slot-scope="scope">
                <img :src ="scope.row.avatar">
                <span>{{scope.row.userName}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column align="center" label="身份">
			        <template slot-scope="scope">
			          <span>{{scope.row.role}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column align="center" label="加入时间">
			        <template slot-scope="scope">
			          <span>{{scope.row.createdAt}}</span>
			        </template>
		      	</el-table-column>
		      	<el-table-column align="center" label="手机号码">
			        <template slot-scope="scope">
			          <span>{{scope.row.mobile}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column  align="center" label="操作" v-if="permission == 3">
			        <template slot-scope="scope">
			        	<b v-show="scope.row.role == '普通用户'" @click="changeMemberStatus(-2, scope.row.socialRoomId, scope.row.userId)" v-if="scope.row.status == 1">加入黑名单</b>
                <b v-show="scope.row.role == '普通用户'" @click="changeMemberStatus(1, scope.row.socialRoomId, scope.row.userId)" v-else>移出黑名单</b>
			        </template>
			    </el-table-column>
		  </el-table>
      <div class="block text-c">
				<!--分页组件 current-page:当前页   -->
				<!--   page-sizes:每页几条数据（选项）   -->
				<!--   page-size:每页几条数据   -->
				<!--   total:总条数   -->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.page"
			      :page-sizes="[10, 20, 30, 40]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import { getSocialRoomMember, changeMemberStatus } from '@/api/social'
import { interaction_social } from '@/utils/permission'
export default {
  data() {
    return {
      permission: 3,
      tableLoading: true,
      formLoading: false,
      listQuery: {
        page: 1,
        total: null,
        role: 0, // 搜索的身份
        userName: '', // 搜索的群成员名称
        mobile: '', // 搜索的手机号
        userId: '', // 搜索的id号
        socialRoomId: null
      },
      socialRoomId: null,
      manageData: [], // 通过传过来id 查询的data
      options: [
        { id: 0, value: '全部' },
        { id: 1, value: '成员' },
        { id: 2, value: '讲师' },
        { id: 4, value: '管理员' }
      ],
      tableData: []
    }
  },
  watch: {
    // 监听路由名称变化 重新调用数据
    $route: function(to, from) {
      console.log(to)
      if (to.name == 'manageSocial') {
        this.socialRoomId = this.$route.params.socialId
        this.getSocialRoomMember(this.socialRoomId)
      }
    }
  },
  methods: {
    searchMember() {
      if (this.socialRoomId) {
        this.getSocialRoomMember(this.socialRoomId)
      }
    },
    getModelPermission() {
      this.permission = interaction_social()
    },
    changeMemberStatus(memberStatus, srmId, userId) {
      this.formLoading = true
      changeMemberStatus({ status: memberStatus, userId: userId }, srmId).then(res => {
        this.formLoading = false
        console.log(res.data)
        this.$message({
          message: res.data.data.msg,
          type: 'success'
        })
        this.getSocialRoomMember(this.socialRoomId)
      }).catch(err => {
        this.formLoading = false
        console.log(err)
      })
    },
    changeMemberType() {
    },
    getSocialRoomMember(srId) {
      this.tableLoading = true
      this.listQuery.socialRoomId = srId
      getSocialRoomMember(this.listQuery).then(res => {
        console.log('res.data: ')
        this.tableLoading = false
        console.log(res.data.data)
        this.manageData = res.data.data.data
        this.listQuery.total = res.data.data.total
        // this.$message({
        //   message: res.data.data.message,
        //   type: 'success'
        // })
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getPaperInTopic(this.listQuery)
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      this.getSocialRoomMember(this.listQuery.socialRoomId)
    }
  },
  created() {
    this.getModelPermission()
  },
  mounted() {
    this.socialRoomId = this.$route.params.socialId
    this.getSocialRoomMember(this.socialRoomId)
  }
}
</script>

<style scoped>
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
  }
	b{
		color: #0A76A4;
		cursor: pointer;
		font-weight: 500;
	}
	b:hover{
		color: #409EFF;
	}
</style>
